<template>
  <div>
    <pt-search :params="params" :config="config" label-width="110px" @search="search"/>
    <pt-table :columns="columns" :dataSource="tableData"
      :options="options" :fetch="getTableList" :pagination="pagination">
    </pt-table>
    <el-dialog title="购买记录" v-dialogDrag :visible.sync="dialogTableVisible" width="1000px">
      <vipPayList :userId="userId" />
    </el-dialog>
  </div>
</template>
<script>
import { memberRedList } from '@/api/activity'
import vipPayList from './componsts/vipPayList'
export default {
   components: { vipPayList },
  data() {
    return { // 表单配置
      columns: [{
        label: '用户信息', minWidth: 100, align: 'center', prop: 'userMobile'
      },{
        label: '当前状态', minWidth: 120, align: 'center', render: row => <div userMsg={row}>{ row.status === 1 ? '生效中' : '未续费'}</div>
      },{
        prop: 'payTime', label: '第一次购买时间', minWidth: 120, align: 'center'
      },{
        prop: 'effectiveTime', label: '有效期', minWidth: 120, align: 'center'
      },{
        label: '续费次/开启后历史月数', minWidth: 120, align: 'center', render: row => <div>{row.num}/{row.totalNum}</div>
      },{
        button: true, label: '操作', width: 140, fixed: 'right', align: 'right',
        group: [{ 
          name: '购买记录/红包使用', type: 'text', onClick: row => this.handerClick(row.userId)
        }]
      }],
      pagination: { total: 10, page: 0, size: 10, curPage: 1 }, // 分页
      options: { // 表单外观
        expand: false,
        mutiSelect: false, // 多选则 mutiSelect
        index: false, // 显示序号
        loading: false, // 表格动画
        initTable: true // 是否一挂载就加载数据
      },
      tableData: [], // 表单数据
      config: [{
        key: 'mobile', type: 'input', label: '用户信息', placeholder: '请输入用户手机号、昵称、id'
      },{
        key: 'selectOrderTime', type: 'select', label: '会员状态', option: [{ 
          label: '会员过期', id: '1' }, { label: '使用中', id: '2' 
        }]
      },{
        key: 'page', type: 'button', group: [{
          name: '查看', type: 'primary', onClick: () => { } 
        },{
          name: '重置',  type: 'info', onClick: () => this.reset() 
        }]
      }],
      params: {
        page: 0,
        size: 10,
        keyWord: '',
        memberStatus: ''
      },
      dialogTableVisible: false, // 用户红包使用记录
      userId: null
    }
  },
  methods: {
    search() { // 搜索
      this.pagination.curPage = 1
      this.pagination.page = 0
      this.getTableList()
    },
    reset() { // 重置
      this.pagination.curPage = 1
      for (const key in this.params) {
        if (key === 'page') {
          this.pagination.page = 0
        } else if (key === 'size') {
          this.pagination.size = 10
        } else if (key === 'agentIds') {
          this.params[key] = []
        } else {
          this.params[key] = ''
        }
      }
      this.getTableList()
    },
    handerClick(id) { // 查看/修改订单操作
      this.dialogTableVisible = !this.dialogTableVisible
      this.$nextTick(() => {
        this.userId = id
      })
    },
    getTableList() { // 获取订单数据
      this.options.loading = true
      const params = { ...this.params }
      params.page = this.pagination.page
      params.size = this.pagination.size
      params.agentId = this.$route.query.agentid
      memberRedList(params).then(res => {
        if (res.success) {
          this.tableData = res.data.list || []
          this.pagination.total = res.data.total
        }
      }).finally(() => { this.options.loading = false })
    }
  }
}
</script>
<style scoped>
  
</style>
